// import SyntaxHighlighter from "react-syntax-highlighter/dist/esm/default-highlight"
import SyntaxHighlighter from 'react-syntax-highlighter'
import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { useEffect } from 'react'

const Code = (props) => {
  // 添加aos动效
  useEffect(() => {
    AOS.init({
      duration: 1000,
      easing: 'ease-out-back',
      delay: 600
    })
  })

  return (
    // <div data-aos="fade-up"> aos 动画
    <div>
      <div style={{fontSize:'16px',fontWeight:'bold',color:'#333'}} className="pad-top-10 pad-bot-10">{props.title}</div>
      <SyntaxHighlighter language={props.lang} style={atomOneDark} showLineNumbers={true} customStyle={{ borderRadius: '6px' }} useInlineStyles={true} lineNumberStyle={{position: 'absolute', marginLeft: '-5px', background: 'rgb(40, 44, 52)', borderRight: '1px solid #777'}}>
        {props.children}
      </SyntaxHighlighter>
    </div>
  )
}

export default Code